大家好，今天我們要來繼續做Detail頁面的UI，之前跟前面幾篇用到比較不同的有BackdropFilter、ImageFilter.blur、AspectRatio、另外Text這次用到文字內容比較長，也有一些參數可以設定。
首先看到AspectRatio，利用這個Widget我們可以設定child的長寬比例
AspectRatio(
aspectRatio: 9 / 16, //寬度高度比例9:16
child: Image.asset(
"assets/videophoto2.jpg",
fit: BoxFit.cover,
),
),
再來是BackdropFilter，我們需要讓背景的圖片高斯模糊
這邊要注意的是這句說明applies the filter to widgets beneath the childBackdropFilter會讓在child之下的部分模糊，所以child是會顯示出來的。
必須帶filter ImageFilter，這邊用blur
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AspectRatio(
aspectRatio: 9 / 16,
child: Image.asset(
"assets/videophoto2.jpg",
fit: BoxFit.cover,
),
),
),
),
最後今天用到比較特別的是Text，先前我們沒有特別做什麼設定
但今天因為有一段文字敘述特別多
我們可以設定maxLines 以及overflow
接下來的code就是一些排版，先前都跟大家介紹過，大家可以看看
Widget _buildMainDetail() {
return Container(
height: MediaQuery.of(context).size.height * .8,
child: Stack(
fit: StackFit.expand,
children: [
Image.asset(
"assets/videophoto2.jpg",
fit: BoxFit.cover,
),
Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: AspectRatio(
aspectRatio: 9 / 16,
child: Image.asset(
"assets/videophoto2.jpg",
fit: BoxFit.cover,
),
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"98%適合您",
style: TextStyle(color: Colors.green),
),
Text(" 2020 "),
Text(" 13+ "),
Text(" 1季 ")
],
),
Padding(
padding: const EdgeInsets.all(4.0),
child: Text(
"第1季上線",
style: TextStyle(fontSize: 16.0),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(4.0),
child: Container(
margin: EdgeInsets.symmetric(vertical: 4.0),
width: double.infinity,
padding: EdgeInsets.all(4.0),
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.play_arrow,
size: 30,
color: Colors.black,
),
SizedBox(
width: 8.0,
),
Text(
"播放",
style: TextStyle(color: Colors.black, fontSize: 18),
)
],
),
),
),
ClipRRect(
borderRadius: BorderRadius.circular(4.0),
child: Container(
margin: EdgeInsets.symmetric(vertical: 4.0),
width: double.infinity,
padding: EdgeInsets.all(4.0),
color: Color(0xff555555),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.file_download,
size: 30,
color: Colors.white,
),
SizedBox(
width: 8.0,
),
Text(
"下載第1季第1集",
style: TextStyle(color: Colors.white, fontSize: 18),
)
],
),
),
),
SizedBox(
height: 8.0,
),
Text(
"主角本條楓在好友白峰理沙推薦下開始遊玩遊戲「NewWorld Online」，創建了名為「梅普露」的角色。作為遊戲初學者，梅普露選擇了不受歡迎的大盾當武器，並因為怕痛而將所有資源用於增進防禦能力，這種形式讓她學到了各種特殊技能並取得罕見裝備，進而在遊戲中創下傳說。",
maxLines: 3,
overflow: TextOverflow.ellipsis),
Align(
alignment: Alignment.centerLeft,
child: Text(
"主演：本渡楓，野口瑠璃子，早見沙織",
style: TextStyle(color: Colors.grey),
)),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.add),
Text('我的片單'),
SizedBox(
width: 80,
)
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.thumb_up),
Text("評分"),
SizedBox(
width: 80.0,
)
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.share),
Text("分享"),
SizedBox(
width: 80.0,
)
],
),
],
),
)
],
),
)
],
),
);
}
今天完成的效果
GitHub連結： flutter-netflix-clone
iThome鐵人賽
看影片追技術